<template>
  <view class="property">
    <!-- 物业交割信息 -->
    <view class="section">
      <view class="title">物业交割信息</view>
      <view class="details">
        <view class="item">
          <text class="label">提交人：</text>
          <text>{{ propertyTransfer.submitter }}</text>
        </view>
        <view class="item">
          <text class="label">提交时间：</text>
          <text>{{ propertyTransfer.submitTime }}</text>
        </view>
      </view>
    </view>

    <!-- 水表信息 -->
    <view class="section">
      <view class="title">水表信息</view>
      <view class="details">
        <view class="item">
          <text class="label">提交人：</text>
          <text>{{ waterMeter.submitter }}</text>
        </view>
        <view class="item">
          <text class="label">提交时间：</text>
          <text>{{ waterMeter.submitTime }}</text>
        </view>
        <view class="item">
          <text class="label">水表度数：</text>
          <text>{{ waterMeter.reading }}</text>
        </view>
        <view class="item">
          <text class="label">水表照片：</text>
          <uploader v-model="waterMeter.photos" disabled />
        </view>
      </view>
    </view>

    <!-- 电表信息 -->
    <view class="section">
      <view class="title">电表信息</view>
      <view class="details">
        <view class="item">
          <text class="label">提交人：</text>
          <text>{{ electricMeter.submitter }}</text>
        </view>
        <view class="item">
          <text class="label">提交时间：</text>
          <text>{{ electricMeter.submitTime }}</text>
        </view>
        <view class="item">
          <text class="label">电表度数：</text>
          <text>{{ electricMeter.reading }}</text>
        </view>
        <view class="item">
          <text class="label">电表照片：</text>
          <uploader v-model="electricMeter.photos" disabled />
        </view>
      </view>
    </view>

    <!-- 房间整体配置照片 -->
    <view class="section">
      <view class="title">房间整体配置照片</view>
      <view class="details">
        <view class="item">
          <text class="label">提交人：</text>
          <text>{{ roomConfig.submitter }}</text>
        </view>
        <view class="item">
          <text class="label">提交时间：</text>
          <text>{{ roomConfig.submitTime }}</text>
        </view>
        <view class="item">
          <text class="label">照片：</text>
          <uploader v-model="roomConfig.photos" disabled />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive } from 'vue';

const propertyTransfer = reactive({
  submitter: '张三',
  submitTime: '2023-04-01 10:00:00',
});

const waterMeter = reactive({
  submitter: '李四',
  submitTime: '2023-04-01 10:05:00',
  reading: '1234',
  photos: [],
});

const electricMeter = reactive({
  submitter: '王五',
  submitTime: '2023-04-01 10:10:00',
  reading: '5678',
  photos: [],
});

const roomConfig = reactive({
  submitter: '赵六',
  submitTime: '2023-04-01 10:15:00',
  photos: [],
});
</script>

<style scoped lang="scss">
.property {
  padding: 20px;
}

.section {
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 20px;
}

.title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.label {
  width: 120px;
 
}
</style>
